<!--
  支付配置组件：  1. 参数费率的填写， 2.支付通道的选择

  @author will
  @site https://pt.jdyd.xyz
  @date 2022/04/06 10:14
-->
<template>
  <div>
    <a-tabs v-model:activeKey="vdata.topTabsVal" tabPosition="top" type="card">
      <a-tab-pane v-if="tabIsShow('paramsAndRateTab')" key="paramsAndRateTab" tab="参数及费率的填写">
        <div class="drawer">
          <div class="search">
            <a-input v-model:value="vdata.ifCodeListSearchData.ifName" class="rate-input" placeholder="搜索渠道名称" />
            <a-button type="primary" :loading="vdata.btnLoading" @click="searchFunc">
              <template #icon><search-outlined /></template>查询
            </a-button>
            
            <a-button style="margin-left: 8px" @click="() => vdata.ifCodeListSearchData = {} "><reload-outlined />重置</a-button>
          </div>

          <!-- 查询到的接口 -->
          <div v-if="!props.onlyRate" class="rate-list" :style="{height: vdata.rateListHeight}">
            <!-- 此处添加v-for 渲染即可 -->
     
            <div v-for="(item, index) in vdata.ifCodeList" :key="index" class="box" @click="selectIfCode(item.ifCode,item.isvNo)">
              <div class="box-border" :class=" vdata.currentIfCode == item.ifCode ? 'border-blue': '' ">
                <div class="box-content" :class=" vdata.currentIfCode == item.ifCode ? 'border-blue': '' ">
                  <div class="box-img" :style="{backgroundColor: item.bgColor}">
                    <img :src="item.icon">
                  </div>
                  <div class="box-text">
                    <div class="box-title">
                      <a-tooltip>
                        <template #title>{{ item.ifName }}</template>
                        {{ item.ifName }}
                      </a-tooltip>
                    </div>
                    <div class="box-name">{{ item.ifCode }}</div>
                    <div v-if="showIfCodeState()" style="font-size: 12px;" :style="{color: stateColor(item.configState)}">{{ typeof item.configState == 'undefined' ? '未配置' : item.configState == 1 ? '已开启' : '关闭' }} </div>
                  </div>
                  <div class="box-select">
                    <a-radio v-if="vdata.currentIfCode == item.ifCode" v-model:checked="vdata.checked" />
                    <a-radio v-else v-model:checked="vdata.uncheck" />
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 分割线 -->
          <div class="division">
            <div v-if="vdata.ifCodeList.length > vdata.number" class="text" @click="openHandle">
              {{ vdata.rateListHeight == '82px' ? '展开' : '收起' }}
              <div>
                <down-outlined v-if="vdata.rateListHeight == '82px'" class="arrow" />  
                <up-outlined v-else class="arrow" />
              </div>
            </div>
            <div class="mark" @click="openHandle"><div /><div /></div>
          </div>


          <a-tabs v-if="vdata.currentIfCode" v-model:activeKey="vdata.paramsAndRateTabVal" tabPosition="left">
            <a-tab-pane v-if="tabIsShow('paramsTab')" key="paramsTab" tab="支付参数">
              <GzPayParamsConfigPanel v-if="vdata.paramsAndRateTabVal == 'paramsTab'" :configMode="props.configMode" :infoId="props.infoId" :selectIfCode="vdata.currentIfCode" />
            </a-tab-pane>
            <a-tab-pane v-if="tabIsShow('rateTab')" key="rateTab" tab="费率配置">
              <GzPaywayRatePanel 
                v-if="vdata.paramsAndRateTabVal == 'rateTab'&&vdata.currentIfCode!=='lklspay'" 
                :configMode="props.configMode" 
                :infoId="props.infoId" 
                :selectIfCode="vdata.currentIfCode"
                :selectIsvNo="vdata.currentIsvNo"
              />

              <RatePanel 
                v-if="vdata.paramsAndRateTabVal == 'rateTab'&&vdata.currentIfCode==='lklspay'" 
                :configMode="props.configMode" 
                :infoId="props.infoId" 
                :selectIfCode="vdata.currentIfCode"
                :selectIsvNo="vdata.currentIsvNo"
              />
            </a-tab-pane>
            <a-tab-pane v-if="configMode === 'mgrIsv'" key="authConfigTab" tab="认证配置">
              <PayAuthConfigPanel :infoId="props.infoId" :selectIfCode="vdata.currentIfCode" />
            </a-tab-pane>
          </a-tabs>
        </div>
      </a-tab-pane>
      <a-tab-pane v-if="tabIsShow('mchPassageTab')" key="mchPassageTab" tab="支付渠道的选择">
        <!-- 支付参数 -->
        <a-card>
          <GzMchPassageConfigPanel v-if="vdata.topTabsVal == 'mchPassageTab'" :configMode="props.configMode" :infoId="props.infoId" />
        </a-card>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script lang="ts" setup >
import { $getPayConfigIfcodes, API_URL_AGENTISV_LIST, req } from '@/api/manage'
import { reactive, onMounted, nextTick, } from 'vue'
import GzPaywayRatePanel from '../GzRateFeeConfig/GzPaywayRatePanel.vue'
import PayAuthConfigPanel from '../PayAuthConfig/PayAuthConfigPanel.vue'

// 定义父组件的传值
const props : any = defineProps({
 
  infoId: { type: String, default: '' }, // 当前配置的所属infoId
  configMode: { type: String, default: '' },   // 模式

})


// 定义响应式数据
const vdata : any = reactive({

      ifCodeListSearchData: { ifName: '' }, // 支付渠道列表的搜索条件
      ifCodeList: [], //当前服务商的支持接口列表
      currentIfCode : '', //当前选择的支付通道
      currentIsvNo : '', //当前选择的支付通道服务商

      checked: true, // 单选框默认打开
      uncheck: false, // 单选默认关闭
      number: 2, // 当大于此值时，将展示展开与收起按钮
      rateListHeight: '82px', // 初始高度

      topTabsVal: 'paramsAndRateTab', //顶部选择项目的当前选择值， paramsAndRateTab  /  mchPassageTab
      paramsAndRateTabVal: 'paramsTab', // 参数及费率卡片的内部切换  paramsTab / rateTab / authConfigTab

})

// 动态获取window可视区域宽度
let initialWidth = document.body.clientWidth

window.addEventListener('resize', () => { 
  initialWidth = document.body.clientWidth
  dynamicWidth(initialWidth)
})

// 根据不同的宽度动态为 vdata.number 赋值
const dynamicWidth = (initialWidth) => {
  if (initialWidth >= 1600) {
    vdata.number = 7 
  } else if (initialWidth >= 1366) {
    vdata.number = 5
  } else if (initialWidth >= 1024) {
    vdata.number = 4
  } else { vdata.number = 2 } 
}
dynamicWidth(initialWidth)

// 定义文字颜色
const stateColor = (state) => {
  if (typeof state == 'undefined') {
    return '#949494'
  } else if (state == 1) {
    return '#1890ff'
  } else{
    return '#ff0000'
  }
}

// 展开与收起
const openHandle = () => {
  vdata.rateListHeight == '82px' ?  vdata.rateListHeight = 'auto' : vdata.rateListHeight = '82px'
}

// 搜索渠道名称
const searchFunc = () => {
  getShowIfCodeList()
}

// 查询支持的接口
const getShowIfCodeList = () => {
  vdata.btnLoading = true

  $getPayConfigIfcodes(props.infoId, props.configMode, vdata.ifCodeListSearchData.ifName).then(res => {
    console.log(res)
    vdata.ifCodeList = res
    vdata.currentIfCode = props.selectIfCode // 默认接口
    vdata.btnLoading = false
  }).catch( () => vdata.btnLoading = false )
}

// 挂载钩子函数 
onMounted(() => {

  vdata.currentIfCode = '' // 默认不选中

   // 查询 【支持的支付接口】
   getShowIfCodeList()


   // 当有禁用的， 那么默认选中第二个
   if(!tabIsShow('paramsTab') && tabIsShow('rateTab')){
      vdata.paramsAndRateTabVal = 'rateTab'
   }

  // 特约商户配置信息
  if(props.configMode == 'mchSelfApp2'){
    vdata.topTabsVal = 'mchPassageTab'
  }
 

})


// 切换 【支付产品】
function selectIfCode(ifCode,isvNo){
  vdata.currentIfCode = ''
  vdata.currentIsvNo = ''
  nextTick(() => vdata.currentIfCode = ifCode )
  if(isvNo){
    nextTick(() => vdata.currentIsvNo = isvNo )
  }else{
    nextTick(() => vdata.currentIsvNo = props.infoId )
  }
  
  
}

// 判断是否显示支付接口的状态
function showIfCodeState(){

  if(props.configMode == 'mgrIsv' || props.configMode == 'mgrMch' || props.configMode == 'agentMch' || props.configMode == 's'){
    return true
  }

  return false

}

// 判断tab是否需要显示的列
function tabIsShow(currentTabVal){

  let disableArr : any = []
  // 配置服务商  禁用支付渠道选择
  if(props.configMode == 'mgrIsv'){
    disableArr = ['mchPassageTab']
  }

  // 配置mananger机构  禁用支付渠道选择
  if(props.configMode == 'mgrAgent'){
    disableArr = ['mchPassageTab', 'paramsTab']
  }

  // 机构配置自己的页面 || 下级机构
  if(props.configMode == 'agentSelf' || props.configMode == 'agentSubagent'){
    disableArr = ['mchPassageTab', 'paramsTab']
  }

  // 特约商户配置信息
  if(props.configMode == 'mchSelfApp2'){
    disableArr = ['paramsAndRateTab', 'rateTab', 'paramsTab']
  }

  return disableArr.indexOf(currentTabVal) < 0

}


</script>

<style lang="less" scoped>
.search {

  display: flex;
  margin: 10px;
  .rate-input {
    width: 200px;
    margin-right: 10px;
  }
}
.rate-list {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  .box {
    padding: 10px;
  }
  .box-content {
    width:100%;
    height: 60px;
    box-sizing: border-box;
    padding: 5px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    background: #fff;
    border: 1px solid #dfe0e6;
    overflow: hidden;
    &:hover {
      cursor: pointer;
    }
  }
  .box-img {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    flex-shrink: 0;
    img {
      width: 26px;
      height: 26px;
    }
  }
  .box-text {
    display:flex;
    flex-direction: column;
    margin-left: 5px;
    margin-right: 5px;
    width: 50px;
    flex-grow: 1;
    .box-title {
      width: 100%;
      text-align: left;
      font-weight: bold;
      font-size: 12px;
      color: #333;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .box-name {
      width: 100%;
      font-weight: 500;
      text-align: left;
      font-size: 12px;
      color: #949494;
      align-self: flex-end;
    }
  }
  .box-border {
    border: 1px solid #fff;
    border-radius: 6px;
  }
  .border-blue {
    border: 1px solid @primary-color;
  }
  .box-select {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    img {
      width: 20px;
      height: 20px;
    }
  }
}

@media screen and (min-width:769px) and (max-width:1024px){
 .box {
      width: calc(100% / 2);
    }
}
@media screen and (min-width:1025px) and (max-width:1366px){
  .box {
      width: calc(100% / 4);
    }
}
@media screen and (min-width:1367px) and (max-width:1600px){
  .box {
      width: calc(100% / 5);
    }
}
@media screen and (min-width:1601px){
  .box {
      width: calc(100% / 7);
    }
}

.division {
  width: 100%;
  height: 1px;
  background: #e8e8e8;
  position: relative;
  margin: 40px 0 ; 
 
  .text {
    &:hover {
      cursor: pointer;
    }
    width: 80px;
    height: 36px;
    border-radius: 5px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-top: none;
    position: absolute;
    top:0;
    left: 50%;
    margin-left: -40px;
    margin-top: -18px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .arrow {
    width: 8px;
    height: 8px;
    margin-left: 5px;
  }
  .mark {
   
    z-index: 1;
    width: 80px;
    height: 18px;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -40px;
    margin-top: -18px;
    display: flex;
    justify-content: space-between;
    div {
      background: #fff;
      height: 100%;
      width: 2px;
    }
  }
}

.drawer {
  border-radius: 10px;
  background: #fff;
  border-radius: 10px;
  padding: 30px;
}

// /deep/ .ant-tabs-nav-list {
//   margin-left: 0 !important;
//   border-radius: 7px  !important;
//   .ant-tabs-tab-active {
//     background: @primary-color !important;
//     .ant-tabs-tab {
//       color:#fff !important;
//     }
    
//   }
// }
</style>